<template>
  <div class="cengdielunbo" v-if="swiperList.length">
    <div class="title-containers" v-if="swiperList.length">
      <img
        :src="fileBaseUrl + swiperList[0].bg"
        class="img-block"
        v-if="
          swiperList[0].bg !== null &&
          swiperList[0].bg !== '' &&
          swiperList[0].bg
        "
      />
      <div class="title" v-else>
        {{ swiperList[0].title }}
        <span class="title-p">{{ swiperList[0].subTitle }}</span>
      </div>
    </div>

    <div class="stage">
      <div class="wrapper" :style="module.height ? `height:${(module.height * 0.552)}px` : ''">
        <img
          v-for="item in swiperList"
          :key="item.id"
          :style="module.height ? `height:${(module.height * 0.552)}px` : 'height:160px'"
          class="imgBasic"
          :class="item.active ? item.swpClass : ''"
          :src="item.pic"
        />
      </div>
    </div>
  </div>
  <ModuleNotConfig :module="module" v-else />
</template>

<script>
export default {
  props: {
    module: {
      type: Object,
    },
    fileBaseUrl: {
      type: String,
    },
  },
  data() {
    return {
      startX: 0,
      endX: 0,
      iCenter: 3,
      showArray: null,
      msetInterval: null,
      swiperList: [],
    };
  },
  watch: {
    module(module) {
      this.start()
    },
  },
  mounted() {
    this.start()
  },
  methods: {
    start() {
      let stackArrays = this.module.modules;
      stackArrays.forEach((item, index) => {
        item.index = index;
        item.active = false;
        if (index == 0) {
          item.swpClass = "swp-left";
        } else {
          item.swpClass = "swp-right";
        }
      });
      for (let i = 0; i < stackArrays.length; i++) {
        if (stackArrays[i].pic) {
          stackArrays[i].pic = this.toFullUrl(stackArrays[i].pic);
        }
      }
      this.swiperList = stackArrays;
      this.automove();
    },
    toFullUrl(value) {
      if (!value) {
        return;
      }
      let fileBaseUrl = this.fileBaseUrl;
      if (
        value.startsWith("http") ||
        value.startsWith("/static/") ||
        value.startsWith("data:image")
      ) {
        return value;
      } else {
        if (!value.startsWith("/") && !value.startsWith("..")) {
          value = "/" + value;
        }
        return fileBaseUrl + value;
      }
    },
    automove() {
      this.intervelHander && clearInterval(this.intervelHander);
      this.intervelHander = setInterval(() => {
        this.moveLeftorRight(1);
      }, 3000);
    },
    moveLeftorRight(idx) {
      let swp = this.swiperList;
      let max = swp.length;
      for (let j = 0; j < max; j++) {
        swp[j].active = true;
      }
      if (idx === 1) {
        if (swp[0] && swp[1]) {
          swp[0].swpClass = "imgleft1";
          swp[1].swpClass = "imgleft2";
          if (swp[2]) {
            swp[2].swpClass = "imgleft3";
          }

          this.swiperList = swp;
          swp.push(swp.shift());
          this.swiperList = swp;
          this.$forceUpdate();
        }
      } else {
        if (swp[1]) {
          swp[max - 1].swpClass = "imgright1";
          swp[0].swpClass = "imgright2";
          if (swp[2]) {
            swp[1].swpClass = "imgright3";
          }

          this.swiperList = swp;
          swp.unshift(swp.pop());
          this.swiperList = swp;
          this.$forceUpdate();
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// .title-containers {
//   padding: 0px 20px 30px;
// }
.img-block {
  height: 29px;
}
.title {
  height: 29px;
  line-height: 29px;
  font-size: 16.5px;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  .title-p {
    font-size: 13.5px;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
  }
}
.stage {
  perspective: 1500px;
  perspective-origin: 50% 50%;
}
.wrapper {
  height: 175px;

  transform-style: preserve-3d;
  position: relative;
}
.imgBasic {
  position: absolute;
  width: 315px;
  height: 160px;
  border-radius: 10px;
}
img:nth-child(1) {
  left: 0;
  z-index: 6;
  transform: scale(1);
  -webkit-transform: scale(1);
}
img:nth-child(2) {
  left: 37.5px;
  z-index: 5;
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
}
img:nth-child(3) {
  left: 70px;
  z-index: 4;
  transform: scale(0.8);
  -webkit-transform: scale(0.8);
}

@keyframes imgleft1 {
  from {
    transform: scale(1);
    -webkit-transform: scale(1);
    left: 0px;
    z-index: 6;
    opacity: 1;
  }
  to {
    transform: scale(1);
    -webkit-transform: scale(1);
    left: -280px;
    z-index: 6;
    opacity: 0;
  }
}
@keyframes imgleft2 {
  from {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    left: 37.5px;
    z-index: 5;
  }
  to {
    transform: scale(1);
    -webkit-transform: scale(1);
    left: 0px;
    z-index: 6;
  }
}
@keyframes imgleft3 {
  from {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    left: 70px;
    z-index: 4;
  }
  to {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    left: 37.5px;
    z-index: 5;
  }
}

@keyframes imgright1 {
  to {
    transform: scale(1);
    -webkit-transform: scale(1);
    left: 0px;
    z-index: 6;
    opacity: 1;
  }
  from {
    transform: scale(1);
    -webkit-transform: scale(1);
    left: -280px;
    z-index: 6;
    opacity: 0;
  }
}
@keyframes imgright2 {
  to {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    left: 37.5px;
    z-index: 5;
  }
  from {
    transform: scale(1);
    -webkit-transform: scale(1);
    left: 0px;
    z-index: 6;
  }
}
@keyframes imgright3 {
  to {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    left: 70px;
    z-index: 4;
  }
  from {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    left: 37.5px;
    z-index: 5;
  }
}

.imgleft1 {
  animation: imgleft1 800ms ease;
  -webkit-animation: imgleft1 800ms ease;
}
.imgleft2 {
  animation: imgleft2 800ms ease;
  -webkit-animation: imgleft2 800ms ease;
}
.imgleft3 {
  animation: imgleft3 800ms ease;
  -webkit-animation: imgleft3 800ms ease;
}
.imgright1 {
  animation: imgright1 800ms ease;
  -webkit-animation: imgright1 800ms ease;
}
.imgright2 {
  animation: imgright2 800ms ease;
  -webkit-animation: imgright2 800ms ease;
}
.imgright3 {
  animation: imgright3 800ms ease;
  -webkit-animation: imgright3 800ms ease;
}
</style>
